Синхронная работа. domtoimg.

[finlolo]

Привет.

Я делаю из двух изображений одно. они лежат в диве. Я успешно конвертирую его в строку формата blob. Мне ее нужно передать через ajax, чтобы сохранить на сервере.
Проблема: мой скрипт не ждет пока сконвертируется картинка и летит вперед, отправляя тем самым пустую переменную.
Помогите сделать так, чтобы скрипт ждал выполнения конвертации div to img

Скрипт конвертации:

domtoimage.toBlob(document.getElementById('list_'+i))
.then(function(blob) {
    var reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = function() {
         GODFILE = reader.result + '';// переменная с blob строкой
    }
});
// ajax запрос

[Malleys]

domtoimage.toBlob(document.getElementById("list_" + i))
.then(function(blob) {
	return new Promise(function(resolve) {
		var reader = new FileReader();
		reader.readAsDataURL(blob); 
		reader.onloadend = function() {
			resolve(reader.result); // dataURL строка
		}
	});
}).then(function(dataURL) {
	// POST запрос
});

ajax запрос

такого нет, есть GET, POST, HEAD и пр.

[Alexandroppolus]

Слегонца оффтоп, но тем не менее:
1) Зачем передавать на сервер dataURL, если проще, дешевле и быстрее передать сразу blob
2) Нафига вообще делать итоговую картинку на клиенте, если можно отправить на сервер адреса обеих картинок, и, возможно, их расположение/размеры?

[Malleys]

1) Зачем передавать на сервер dataURL, если проще, дешевле и быстрее передать сразу blob

Можно сразу вставить куда надо... на (кол-во картинок) запросов меньше

2) Нафига вообще делать итоговую картинку на клиенте, если можно отправить на сервер адреса обеих картинок, и, возможно, их расположение/размеры?

Ну если это программа для обработки изображения, то она должна быть программой, а не «размазано по двум частям и меняем в семи местах»!

[finlolo]

Malleys,
он не видит, отправляет запрос, но dataUrl пустой

[Malleys]

он не видит, отправляет запрос, но dataUrl пустой

<img id="list_0" src="https://images.unsplash.com/photo-1552224613-b3c73ede511f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script>
var i = 0;
domtoimage.toBlob(document.getElementById("list_" + i))
.then(function(blob) {
	return new Promise(function(resolve) {
		var reader = new FileReader();
		reader.readAsDataURL(blob); 
		reader.onloadend = function() {
			resolve(reader.result); // dataURL строка
		}
	});
}).then(function(dataURL) {
	// POST запрос
	alert(dataURL);
});

</script>

Всё-таки работает, проверьте картинку

[finlolo]

Malleys,
спасибо. вроде заработало.
посоветуйте, как обработать данную строку на php.

[finlolo]

Malleys,
Все работает, круто. Спасибо.
Только у меня теперь есть небольшая проблемка:

У меня цикл перебирает все формы с такими картинками, если быть точным то цикл for. Трабл в том, что он переходит на следующий шаг не дожидаясь окончания текущей итерации, в итоге пока добавляется файл происходит киш-миш.

Вот так у меня выглядит примерно структурно код:

for (i = 0; i < airforms.length ; i++){
   id = airforms[i].id.replace("form_", ""); //на этом моменте итерация перескакивает на другую
   domtoimage.toBlob(document.getElementById("list_" + id))
   .then(function(blob) {
      return new Promise(function(resolve) {
      var reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function() {
         resolve(reader.result); // dataURL строка
      }
   });
  }).then(function(dataURL) {
   //отправляю файл 
   //записываю данные с формы в массив объектов
   //передаю массиву объектов ссылку на файл
   //получается объект с данными формы и уже загруженным файлом, в этот момент уже фиг знает какая итерация идет (конечно, в зависимости от количества форм)
});

}

//передаю массив объектов на отправку сообщения. в итоге получается, что отправка делается, а массив пуст, так как еще не закончались загружаться файлы.

[Malleys]

У меня цикл перебирает все формы с такими картинками, если быть точным то цикл for. Trable в том, что он переходит на следующий шаг не дожидаясь окончания текущей итерации, в итоге пока добавляется файл происходит киш-миш.

Используйте async/await
<form id="form_0">
	<img id="list_0" src="https://picsum.photos/800/800">
</form>
<form id="form_1">
	<img id="list_1" src="https://picsum.photos/400/400">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script>
const airforms = document.querySelectorAll("form");
const urls = [];
(async () => {
	for(const airform of airforms) {
		const id = airform.id.replace("form_", "");

		const blob = await domtoimage.toBlob(document.getElementById("list_" + id));

		const formData = new FormData();
		formData.append("file", blob);

		const endPoint = "http://0.0.0.0:8080/image-upload.php";

		// отправляю файл
		const response = await fetch(endPoint, {
			method: "POST",
			body: formData
		});

		const result = await response.json();
		//записываю данные с формы в массив объектов
		//передаю массиву ссылку на файл

		if("path" in result)
			urls.push(new URL(result.path, endPoint));
	}

	// выводится массив с ссылками на уже загруженные файлы, после того как всё загрузилось
	console.log(urls);
})();

</script>

Файлы отправляются POST запросом в http://0.0.0.0:8080/image-upload.php

Файл загружается в папку upload

посоветуйте, как обработать данную строку на php.

чтобы сохранить на сервере.

Может тогда всё-таки сохранять в виде файла...

Файл image-upload.php

<?php

define('KB', 1000);
define('MB', 1000 * KB);
define('GB', 1000 * MB);

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');

$target_dir = "uploads/";
$imageFileType = $_FILES["file"]["type"];
$file_name = sha1_file($_FILES["file"]["tmp_name"]);
$extension = explode('/', $imageFileType)[1];
$target_file = $target_dir . 'image-' . $file_name . '.' . $extension;
$result['ok'] = true;

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["file"]["tmp_name"]);
    if($check !== false) {
        $result['message'][] = "File is an image - " . $check["mime"] . ".";
        $result['ok'] = true;
    } else {
        $result['message'][] = "File is not an image.";
        $result['ok'] = false;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    $result['message'][] = "Sorry, file already exists.";
    $result['ok'] = false;
    $result['path'] = $target_file;
}
// Check file size
if ($_FILES["file"]["size"] > 5 * MB) {
    $result['message'][] = "Sorry, your file is too large.";
    $result['ok'] = false;
}
// Allow certain file formats
if($extension != "jpg" && $extension != "png" && $extension != "jpeg"
&& $extension != "gif" ) {
    $result['message'][] = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $result['ok'] = false;
}
// Check if $result['ok'] is set to false by an error
if ($result['ok'] == false) {
    $result['message'][] = "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        $result['message'][] = "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
        $result['path'] = $target_file;
    } else {
        $result['message'][] = "Sorry, there was an error uploading your file.";
        $result['ok'] = false;
    }
}

echo json_encode($result);